<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
		.carousel{
			height: 700px;
		}
		
		.carousel-inner{
			height: 100%;
		}
		.item{
			
			overflow: hidden;
		}
		.item img{
			/*宽自适应*/
			width: 100%;
			height: auto;
			
			/*
			 	高自适应
			 	width: auto;
			 	height: 100%;
			 * */
	/*		height: 100% !important;*/
		}
		</style>
	</head>
	<body>

	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<!--轮播图下方的控制点-->
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="img/360296.jpg" alt="1">
		</div>
		<div class="item">
			<img src="img/47140.jpg" alt="2">
		</div>
		<div class="item active">
			<img src="img/653040.jpg" alt="3">
		</div>
		<div class="item">
			<img src="img/986085.jpg" alt="4">
		</div>
	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/bootstrap.js"></script>
	
	</body>
</html>
